html,body {
            width: 100%;
            height: 100%;
        }
.swiper-container{
  width: 414px;
  height: 200px; 
   img{
    width: 100%;
    height: 100%;
   }
}
.main{
    overflow-y: scroll;
    flex:1;
    margin-bottom:77px;
     .one{
         margin: 15px auto;
        .today{
            width: 150px;
            height: 150px;
            background:url('../../assets/imgs/index-card-rank.png') no-repeat left / cover;
            background-color: rgba(21, 146, 204, 1);
            border-radius: 15px;
            color: rgba(16, 16, 16, 1);
            position: relative;
            h3{
                color: rgba(0, 78, 115, 1);
                font-size: 20px;
                position: absolute;
                top:10px;
                left:10px;
            }
            p{
                color: rgba(255, 255, 255, 1);
                font-size: 80px;
                position: absolute;
                bottom:20px;
                right:20px;
            }
        }
        .daka{
            width: 212px;
            height: 150px;
            background:url('../../assets/imgs/index-card-sum.png') no-repeat left / cover ;
            background-color: rgba(123, 203, 245, 1);
            position: relative;
           
            h3{
                color: rgba(0, 78, 115, 1);
                font-size: 20px;
                position: absolute;
                top:10px;
                left:10px;
            }
            .clock{
                width: 100px;
                height: 40px;
                color: rgba(0, 78, 115, 1);
                font-size: 16px;
                border: 3px solid rgba(0, 81, 119, 1);
                position: absolute;
                bottom:20px;
                right:20px;
                border-radius: 10px;
                text-align: center;
                line-height: 30px;
            }
            .clocked{
                width: 100px;
                height: 40px;
                color: white;
                font-size: 16px;
                border: 3px solid rgba(0, 81, 119, 1);
                position: absolute;
                bottom:20px;
                right:20px;
                border-radius: 10px;
                text-align: center;
                line-height: 30px;
            }

        }
    }
   .two{
    margin-bottom: 15px;
    position: relative;
    .motion{
        width: 180px;
        height: 110px;
        background:url('../../assets/imgs/index-card-data.png') no-repeat left / cover ;
        background-color:#7BCBF5;
        border-radius: 15px;
        font-size: 16px;
        color: white;
        h4{
        position: absolute;
        top:10px;
        left: 10px;
        }
    }
    .badges{
        width: 185px;
        height: 110px;
        background:url('../../assets/imgs/index-card-badge.png') no-repeat left / cover ;
        background-color:#7BCBF5;
        border-radius: 15px;
        position: relative;
        h3{
            color: rgba(0, 81, 119, 1);
            font-size: 16px;
            position: absolute;
            top: 5px;
            left: 5px;
        }
        p{
            position: absolute;
            bottom: 10px;
            right: 10px;
          
            #badge{
                display: inline-block;
                color: rgba(0, 78, 115, 1);
                font-size: 80px;
            }
          .danWei{
               color: rgba(0, 81, 119, 1);
               font-size: 18px;
          }
        }

    }
   }
   .class{
    width: 385px;
    height: 110px;
    background:url('../../assets/imgs/index-swiper-bg2.jpg') no-repeat left / cover ;
    background-color:#7BCBF5;
    opacity: 0.9;
    border-radius: 15px;
    margin-bottom: 15px;
    position: relative;
    h4{
        position: absolute;
        top:10px;
        left: 10px;
        font-size: 16px;
        color: white;
        }
   }
   .outdoor{
     width: 385px;
     height: 110px;
     background:url('../../assets/imgs/index-card-run.png') no-repeat left / cover ;
    background-color:#7BCBF5;
    opacity: 0.9;
    border-radius: 15px;
    margin-bottom: 300px;
    position: relative;
    h4{
        position: absolute;
        top:10px;
        left: 10px;
        font-size: 16px;
        color: white;
        }
   }

}